<template>
  <view>
    <!--  -->
    <!-- audio -->
    <view class="bodyviewaudio">
      <view class="audio">
        <view class="audio-img">
          <image class="cover-img" :src='coverImgUrl'></image>
        </view>
        <view class="audio-content">
          <view>{{title}}</view>
          <view class="audio-singer">{{singer}} 专辑:&nbsp;{{epname}}</view>
          <slider class="slider" step="1" :min="min" :max="max" :value="value" block-size="12" @change='seek'
            @changing='seeking'></slider>
          <view class="time">
            <view>{{now}}</view>
            <view>{{long}}</view>
          </view>
        </view>
      </view>
      <view class="time">
        <view @click="start" class="colorclick">开始</view>
        <view @click="pause" class="colorclick">暂停</view>
        <view @click="playPrev" class="colorclick">上一首</view>
        <view @click="playNext" class="colorclick">下一首</view>
      </view>
    </view>
    <!-- // -->
  </view>
</template>

<script>
  import audio from '@/mixins/my-audio.js'
  export default {
    mixins: [audio],
    name: "my-audio",
    data() {
      return {
        coverImgUrl: '', ////////
        title: '',
        singer: '',
        epname: '',
        currentTime: 0,
        duration: 0,
        value: 0,
        now: '00:00'
      };
    },
    methods: {
      seek(e) {
        var that = this;
        var value = e.detail.value;
        uni.getBackgroundAudioManager().seek(value);
      },
      seeking(e) {
        var that = this;
        var value = e.detail.value;
        var now = that.formatS2M(value);
        // 显示当前滑动的时间
        this.now = now
      },
    }
  }
</script>

<style lang="less">
  .btn {
    margin: 550rpx auto 0;
    width: 625rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%);
    border-radius: 6rpx;
    font-size: 30rpx;
    color: #fff;
    line-height: 80rpx;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .btn:after {
    content: "";
    background: #999;
    position: absolute;
    width: 750rpx;
    height: 750rpx;
    left: calc(50% - 375rpx);
    top: calc(50% - 375rpx);
    opacity: 0;
    margin: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.4s ease-in-out;
  }

  .floor-list {
    position: relative;
  }

  // audio
  .audio {
    display: flex;
    flex-direction: row;
  }

  .audio-img {
    width: 200rpx;
    height: 200rpx;
  }

  .cover-img {
    width: 150rpx;
    height: 150rpx;
    margin: 20rpx 25rpx;
    border-radius: 12px;
  }

  .audio-content {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    font-size: 25rpx;
    width: 560rpx;
    padding-right: 25rpx;
  }

  .audio-singer {
    margin-top: 10rpx;
  }

  .slider {
    margin: 10rpx 0 0 0;
  }

  .time {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 20rpx;

    .colorclick {
      width: 200rpx;
      height: 83rpx;
      text-align: center;
      line-height: 83rpx;
      background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
      border-radius: 12px;
      margin: 0 15px 19rpx 19rpx;
    }
  }

  .bodyviewaudio {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    border-radius: 12px;
    margin-bottom: 8px;
  }
</style>
